<template>
  <div>
    <div ref="c223" style="height: 200px; margin-top: 15px; margin-right: 15px"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request'
export default {
  data() {
    return {
      valueData: [],
      columnChart: null,
    };
  },
  methods: {
    loadColumn() {
      this.columnChart = new Column(this.$refs.c223, {
        data: this.valueData,
        xField: 'type',
        yField: 'value',
        legend: {
          position: 'top',
        },
        columnStyle: (datum) => ({
          fill: datum.value > 1 ? '#d07f7a' : '#ccccff',
        }),
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              backgroundColor: '#147',
              color: 'grey',
              fontSize: 20
            }
          }
        },
        xAxis: {
          label: {
            style: {
              fontSize: 15,
              fill: 'grey',
            },
            formatter: (text) => {
              const maxLength = 4;
              return text.length > maxLength
                ? text.slice(0, maxLength) + '...'
                : text;
            }
          },
        },
      });
      this.columnChart.render();
    },
    async getValueData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      console.log(res, '获取响应');
      this.valueData = res.data;
    }
  },
  async mounted() {
    await this.getValueData();
    this.loadColumn();
  }
}
</script>
<style scoped></style>